"use client";
import { useEffect, useRef } from "react";
import gsap from "gsap";
import { TextPlugin } from "gsap/TextPlugin";
import { Ma_Shan_Zheng } from "next/font/google";

const maShanZheng = Ma_Shan_Zheng({
  weight: "400",
  subsets: ["latin"],
});

gsap.registerPlugin(TextPlugin);
const tl = gsap.timeline();

export default function TypeWriter() {
  const blogNameRef = useRef(null);
  const englishSentenceRef = useRef(null);
  const chineseSentenceRef = useRef(null);
  const blogName = process.env.NEXT_PUBLIC_TYPEWRITER_BLOGNAME ?? "My Blog";
  const englishSentence =
    process.env.NEXT_PUBLIC_ENGLISH_SENTENCE ??
    "Quitters never win and winners never quit";
  const chineseSentence =
    process.env.NEXT_PUBLIC_CHINESE_SENTENCE ??
    "不积跬步，无以至千里；不积小流，无以成江海";

  useEffect(() => {
    tl.to(
      blogNameRef.current,
      {
        duration: blogName.length * 0.1,
        text: blogName,
        ease: "none",
      },
      0
    )
      .to(
        englishSentenceRef.current,
        {
          duration: englishSentence.length * 0.1,
          text: englishSentence,
          ease: "none",
        },
        1
      )
      .to(
        chineseSentenceRef.current,
        {
          duration: chineseSentence.length * 0.1,
          text: chineseSentence,
          ease: "none",
        },
        2
      );
  }, [blogName, englishSentence, chineseSentence]);
  return (
    <div className="h-[130px] md:min-w-[350px] md:min-h-[205px] xl:min-w-[630px]">
      <div
        className={`${maShanZheng.className} text-4xl md:text-7xl text-yellow-700`}
        ref={blogNameRef}
      ></div>
      <div
        className={`${maShanZheng.className} text-2xl md:text-4xl text-yellow-600`}
        ref={englishSentenceRef}
      ></div>
      <div
        className={`${maShanZheng.className} text-xl md:text-3xl text-amber-500`}
        ref={chineseSentenceRef}
      ></div>
    </div>
  );
}
